<template>
    <v-card class="broker-card mb-3" :class="{ 'selected': selected }" variant="outlined"
        @click="$emit('select', broker)">
        <v-card-text class="pa-3">
            <!-- 头部：头像和名称 -->
            <div class=" align-center mb-3">
                <div class="d-flex align-center justify-center">
                    <v-avatar :color="statusColor" class="me-3" size="40">
                        <v-img v-if="broker.avatar" :src="broker.avatar"
                            :alt="broker.preferredName || broker.legalName" />
                        <span v-else class="text-white font-weight-bold">
                            {{ getInitials(broker.preferredName || broker.legalName || '') }}
                        </span>
                    </v-avatar>
                </div>

                <div class="flex-1">
                    <div class="text-body-1 font-weight-bold">
                        {{ broker.preferredName || broker.legalName || '未知' }}
                    </div>
                    <div class="d-flex align-center mb-1" v-if="broker.email">
                        <v-icon size="16" class="me-2 text-grey">mdi-email</v-icon>
                        <span class="text-body-2 text-truncate">{{ broker.email }}</span>
                    </div>
                    <div class="d-flex align-center mb-1" v-if="broker.phone">
                        <v-icon size="16" class="me-2 text-grey">mdi-phone</v-icon>
                        <span class="text-body-2">{{ broker.phone }}</span>
                    </div>
                </div>
            </div>

            <!-- 联系信息 -->
            <div class="contact-info mb-3" v-if="broker.bdmName">

                <div class="d-flex align-center" v-if="broker.bdmName">
                    <v-icon size="16" class="me-2 text-grey">mdi-account-tie</v-icon>
                    <span class="text-body-2">BDM: {{ broker.bdmName }}</span>
                </div>
            </div>

            <!-- 时间信息 -->
            <div class="d-flex justify-space-between text-caption text-grey mb-3">
                <span v-if="broker.requestDate">申请: {{ formatDate(broker.requestDate) }}</span>
                <span v-if="broker.createTime">创建: {{ formatDate(broker.createTime) }}</span>
            </div>

            <!-- 操作按钮 -->
            <div class="d-flex gap-1">
                <v-btn size="small" color="primary" variant="text" icon="mdi-pencil"
                    @click.stop="$emit('edit', broker)" />
                <v-btn size="small" color="error" variant="text" icon="mdi-delete"
                    @click.stop="$emit('delete', broker)" />
                <v-btn size="small" color="success" variant="text" icon="mdi-eye" @click.stop="$emit('view', broker)" />
                <v-btn size="small" color="info" variant="text" icon="mdi-history"
                    @click.stop="$emit('record', broker)" />
            </div>
        </v-card-text>
    </v-card>
</template>

<script setup lang="ts">
import { computed } from 'vue';
import type { BrokerInfoModel } from '@/api/system/brokerinfo/BrokerInfoManagementApi';

interface Props {
    broker: BrokerInfoModel;
    statusColor: string;
    selected: boolean;
}

const props = defineProps<Props>();

const emit = defineEmits<{
    'edit': [broker: BrokerInfoModel];
    'delete': [broker: BrokerInfoModel];
    'view': [broker: BrokerInfoModel];
    'record': [broker: BrokerInfoModel];
    'select': [broker: BrokerInfoModel];
}>();

function getInitials(name: string): string {
    if (!name) return '?';
    const words = name.split(' ');
    if (words.length >= 2) {
        return (words[0][0] + words[1][0]).toUpperCase();
    }
    return name.substring(0, 2).toUpperCase();
}

function formatDate(date: string | Date | undefined): string {
    if (!date) return '';
    const d = new Date(date);
    return d.toLocaleDateString('zh-CN');
}
</script>

<style scoped>
.broker-card {
    transition: all 0.3s ease;
    cursor: pointer;
    user-select: none;
}

.broker-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.broker-card.selected {
    border-color: rgb(var(--v-theme-primary));
    background-color: rgba(var(--v-theme-primary), 0.05);
}

.contact-info {
    min-height: 60px;
}

.text-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 150px;
}
</style>